<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue 3 as the New Default | The Vue Point</title>
    <meta name="description" content="The offical blog for the Vue.js project">
    <link rel="stylesheet" href="static/css/style.b58d2c90.css">
    <link rel="modulepreload" href="https://blog.vuejs.org/assets/app.9f8b31e8.js">
    <link rel="modulepreload" href="https://blog.vuejs.org/assets/posts_vue-3-as-the-new-default.md.48a17eee.lean.js">
    
    <meta name="twitter:site" content="@vuejs">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="https://vuejs.org/images/logo.png">
  <link rel="icon" type="image/x-icon" href="https://blog.vuejs.org/favicon.ico">
  <script src="static/js/script.js" data-site="NYHGSGQV" data-spa="auto" defer=""></script>
  <meta name="twitter:title" content="Vue 3 as the New Default | The Vue Point">
  <meta property="og:title" content="Vue 3 as the New Default | The Vue Point">
  </head>
  <body>
    <div id="app"><div class="antialiased"><div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0"><nav class="flex justify-between items-center py-10 font-bold"><a class="text-xl" href="index10.html" aria-label="The Vue Point"><img class="inline-block mr-2" style="width:36px;height:31px;" alt="logo" src="static/picture/logo1.svg"><span class="hidden md:inline">The Vue Point</span></a><div class="text-sm text-gray-500 leading-5"><a class="hover:text-gray-700" href="javascript:;" target="_blank" rel="noopener"><span class="hidden sm:inline">GitHub </span>Source</a><span class="mr-2 ml-2">·</span><a class="hover:text-gray-700" href="javascript:;">RSS<span class="hidden sm:inline"> Feed</span></a><span class="mr-2 ml-2">·</span><a class="hover:text-gray-700" href="index12.html" target="_blank" rel="noopener">Vuejs.org →</a></div></nav></div><main class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0"><article class="xl:divide-y xl:divide-gray-200"><header class="pt-6 xl:pb-10 space-y-1 text-center"><dl><dt class="sr-only">Published on</dt><dd class="text-base leading-6 font-medium text-gray-500"><time datetime="2022-01-20T12:00:00.000Z">January 20, 2022</time></dd></dl><h1 class="text-3xl leading-9 font-extrabold text-gray-900 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">Vue 3 as the New Default</h1></header><div class="divide-y xl:divide-y-0 divide-gray-200 xl:grid xl:grid-cols-4 xl:gap-x-10 pb-16 xl:pb-20" style="grid-template-rows:auto 1fr;"><dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200"><dt class="sr-only">Authors</dt><dd><ul class="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8"><li class="flex items-center space-x-2"><img src="https://gravatar.com/avatar/eca93da2c67aadafe35d477aa8f454b8" alt="author image" class="w-10 h-10 rounded-full"><dl class="text-sm font-medium leading-5 whitespace-nowrap"><dt class="sr-only">Name</dt><dd class="text-gray-900">Evan You</dd><dt class="sr-only">Twitter</dt><dd><a href="javascript:;" target="_blank" rel="noopnener noreferrer" class="link">@youyuxi</a></dd></dl></li></ul></dd></dl><div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2"><div style="position:relative;" class="prose max-w-none pt-10 pb-8"><div><p>TL;DR: Vue 3 is now the new default version as of <strong>Monday, February 7, 2022</strong>!</p><p>Make sure to read the <a href="#potential-required-actions">Potential Required Actions</a> section to see if you need to make certain changes before the switch to avoid breakage.</p><hr><h2 id="from-a-library-to-a-framework" tabindex="-1">From a Library to a Framework <a class="header-anchor" href="#from-a-library-to-a-framework" aria-hidden="true">#</a></h2><p>When Vue first started, it was just a runtime library. Over the years, it has evolved into a framework that encompasses many sub projects:</p><ul><li>The core library, i.e. the <code>vue</code> npm package</li><li>The documentation, with enough content to be considered a book</li><li>The build toolchain, i.e. Vue CLI, vue-loader and other supporting packages</li><li>Vue Router for building SPA</li><li>Vuex for state management</li><li>Browser devtools extension for debugging and profiling</li><li>Vetur, the VSCode extension for Single-File Component IDE support</li><li>ESLint plugin for static style / error checking</li><li>Vue Test Utils for component testing</li><li>Custom JSX transforms that leverages Vue&#39;s runtime features</li><li>VuePress for Vue-based static site generation</li></ul><p>This is only possible because Vue is a community-driven project. Many of these projects were started by community members who later became Vue team members. The rest were originally started by me, but are now almost entirely maintained by the team (with the exception of the core library).</p><h2 id="soft-launch-of-vue-3" tabindex="-1">Soft Launch of Vue 3 <a class="header-anchor" href="#soft-launch-of-vue-3" aria-hidden="true">#</a></h2><p>With the core releasing a new major version, all the other parts of the framework needed to move forward together. We also needed to provide a migration path for Vue 2 users. This was a massive undertaking for a community-drive team like Vue. When Vue 3 core was ready, most other parts of the framework were either in beta or still awaiting update. We decided to go ahead and release the core so that the early adopters, library authors and higher-level frameworks can start building with it while we worked on the rest of the framework.</p><p>At the same time, we kept Vue 2 as the default for documentation and npm installs. This is because we knew that for many users, Vue 2 still provided a more coherent and comprehensive experience until other parts of Vue 3 are refined.</p><h2 id="the-new-vue" tabindex="-1">The New Vue <a class="header-anchor" href="#the-new-vue" aria-hidden="true">#</a></h2><p>This soft launch process took longer than we hoped, but we are finally here: we are excited to announce that Vue 3 will become the new default version on <strong>Monday, February 7, 2022</strong>.</p><p>Outside of Vue core, we have improved almost every aspect of the framework:</p><ul><li>Blazing fast, <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vite</a>-powered build toolchain</li><li>More ergonomic Composition API syntax via <code>&lt;script setup&gt;</code></li><li>Improved TypeScript IDE support for Single File Components via <a href="javascript:;" target="_blank" rel="noopener noreferrer">Volar</a></li><li>Command line type checking for SFCs via <a href="javascript:;" target="_blank" rel="noopener noreferrer">vue-tsc</a></li><li>Simpler state management via <a href="javascript:;" target="_blank" rel="noopener noreferrer">Pinia</a></li><li>New devtools extension with simultaneous Vue 2 / Vue 3 support and a <a href="javascript:;" target="_blank" rel="noopener noreferrer">plugin system</a> that allows community libraries to hook into the devtools panels</li></ul><p>We also completely reworked the main documentation. <a href="javascript:;" target="_blank" rel="noopener noreferrer">The new vuejs.org</a> (currently in staging) will provide updated framework overview and recommendations, flexible learning paths for users from different backgrounds, the ability to toggle between Options API and Composition API throughout the guide and examples, and many new deep dive sections. It&#39;s also <em>very</em> fast - which we will discuss in more details in a separate blog post soon.</p><h2 id="version-switch-details" tabindex="-1">Version Switch Details <a class="header-anchor" href="#version-switch-details" aria-hidden="true">#</a></h2><p>Here are the details on what we mean by &quot;the new default&quot;. In addition, please read the <a href="#potential-required-actions">Potential Required Actions</a> section to see if you need to make certain changes before the switch to avoid breakage.</p><h3 id="npm-dist-tags" tabindex="-1">npm dist tags <a class="header-anchor" href="#npm-dist-tags" aria-hidden="true">#</a></h3><ul><li><p><code>npm install vue</code> now installs Vue 3 by default.</p></li><li><p>The <code>latest</code> dist tag of all other official npm packages now point to Vue 3 compatible versions, including <code>vue-router</code>, <code>vuex</code>, <code>vue-loader</code>, and <code>@vue/test-utils</code>.</p></li></ul><h3 id="official-docs-and-sites" tabindex="-1">Official docs and sites <a class="header-anchor" href="#official-docs-and-sites" aria-hidden="true">#</a></h3><p>All documentation and official sites now default to Vue 3 versions. These include:</p><ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">vuejs.org</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">router.vuejs.org</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">vuex.vuejs.org</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">vue-test-utils.vuejs.org</a> (moved to <a href="javascript:;" target="_blank" rel="noopener noreferrer">test-utils.vuejs.org</a>)</li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">template-explorer.vuejs.org</a></li></ul><p>The current Vue 2 versions of these sites have been moved to new addresses (the version prefixes indicate the libraries&#39; respective versions, not Vue core&#39;s):</p><ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">vuejs.org</a> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer">v2.vuejs.org</a> (old v2 URLs will auto redirect to the new address)</li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">router.vuejs.org</a> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer">v3.router.vuejs.org</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">vuex.vuejs.org</a> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer">v3.vuex.vuejs.org</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">vue-test-utils.vuejs.org</a> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer">v1.test-utils.vuejs.org</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">template-explorer.vuejs.org</a> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer">v2.template-explorer.vuejs.org</a></li></ul><h3 id="github-repos" tabindex="-1">GitHub repos <a class="header-anchor" href="#github-repos" aria-hidden="true">#</a></h3><p>All GitHub repos under the <code>vuejs</code> organization have switched to Vue 3 versions in the default branch. In addition, we have renamed the following repos to remove <code>next</code> in their names:</p><ul><li><code>vuejs/vue-next</code> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>vuejs/core</code></a></li><li><code>vuejs/vue-router-next</code> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>vuejs/router</code></a></li><li><code>vuejs/docs-next</code> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>vuejs/docs</code></a></li><li><code>vuejs/vue-test-utils-next</code> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>vuejs/test-utils</code></a></li><li><code>vuejs/jsx-next</code> -&gt; <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>vuejs/babel-plugin-jsx</code></a></li></ul><p>Translation repos for the main documentation are moved to the <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>vuejs-translations</code> organization</a>.</p><p>GitHub handles repo directs automatically, so previous links to source code and issues should still work.</p><h3 id="devtools-extension" tabindex="-1">Devtools extension <a class="header-anchor" href="#devtools-extension" aria-hidden="true">#</a></h3><p>Devtools v6, which was previously published under the <a href="javascript:;" target="_blank" rel="noopener noreferrer">beta channel</a> on Chrome Web Store, is now published under the <a href="javascript:;" target="_blank" rel="noopener noreferrer">stable channel</a>.</p><p>The previous version of the devtools extension is still be available and has been moved to the <a href="javascript:;" target="_blank" rel="noopener noreferrer">legacy channel</a>.</p><h2 id="potential-required-actions" tabindex="-1">Potential Required Actions <a class="header-anchor" href="#potential-required-actions" aria-hidden="true">#</a></h2><h3 id="unversioned-cdn-usage" tabindex="-1">Unversioned CDN Usage <a class="header-anchor" href="#unversioned-cdn-usage" aria-hidden="true">#</a></h3><p>If you are using Vue 2 via a CDN link without specifying a version, make sure to specify a version range via <code>@2</code>:</p><div class="language-diff"><pre><code><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> &lt;script src=&quot;https://unpkg.com/vue&quot;&gt;&lt;/script&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> &lt;script src=&quot;https://unpkg.com/vue@2&quot;&gt;&lt;/script&gt;
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js&quot;&gt;&lt;/script&gt;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js&quot;&gt;&lt;/script&gt;
</span></span></code></pre></div><p>Note: even if using Vue 3, you should also always specify a version range in production to avoid accidentally loading future major versions.</p><h3 id="npm-latest-tag" tabindex="-1">NPM <code>latest</code> Tag <a class="header-anchor" href="#npm-latest-tag" aria-hidden="true">#</a></h3><p>If you are installing Vue or other official libraries from npm using the <code>latest</code> tag or <code>*</code>, please update to explicitly use Vue 2 compatible versions:</p><div class="language-diff"><pre><code>{
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> &quot;dependencies&quot;: {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">   &quot;vue&quot;: &quot;latest&quot;,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">   &quot;vue&quot;: &quot;^2.6.14&quot;,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">   &quot;vue-router&quot;: &quot;latest&quot;,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">   &quot;vue-router&quot;: &quot;^3.5.3&quot;,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">   &quot;vuex&quot;: &quot;latest&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">   &quot;vuex&quot;: &quot;^3.6.2&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> },
</span><span class="token prefix unchanged"> </span><span class="token line"> &quot;devDependencies&quot;: {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">   &quot;vue-loader&quot;: &quot;latest&quot;,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">   &quot;vue-loader&quot;: &quot;^15.9.8&quot;,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">   &quot;@vue/test-utils&quot;: &quot;latest&quot;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">   &quot;@vue/test-utils&quot;: &quot;^1.3.0&quot;
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> }
</span></span>}
</code></pre></div></div></div></div><footer class="text-sm font-medium leading-5 divide-y divide-gray-200 xl:col-start-1 xl:row-start-2"><!----><div class="py-8"><h2 class="text-xs tracking-wide uppercase text-gray-500"> Previous Article </h2><div class="link"><a href="vue-3.2.html">Vue 3.2 Released!</a></div></div><div class="pt-8"><a class="link" href="index10.html">← Back to the blog</a></div></footer></div></article></main></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"b0a39757\",\"posts_hello-2021.md\":\"28bcda93\",\"posts_vue-3-as-the-new-default.md\":\"48a17eee\",\"posts_vue-3-one-piece.md\":\"156ba32d\",\"posts_vue-3.2.md\":\"b25d09af\"}")</script>
    <script type="module" async="" src="static/js/app.9f8b31e8.js"></script>
    
  </body>
</html>